<template>
    <!-- 面板头部 -->
    <panelHead :route="route" />
    <el-row class="home" :gutter="20">
        
        <!-- 用户信息 -->
        <el-col :span="12" style="margin-top: 20px;">
            <el-card>
                <div class="user-info">
                    <el-image class="user-img" :src="user.user_img" />
                    <p>{{ user.user_name }}</p>
                </div>
                <div class="login-info">
                    <p>当前权限：{{ user.permission }}</p>
                    <p>登录的ip:{{ user.ip }}</p>
                </div>
            </el-card>
        </el-col>

        <!-- 订单统计 -->
        <el-col :span="12" style="margin-top: 20px;">
            <div class="types-box">
                <el-card v-for="(item, index) in types" :key="index" :body-style="{ display: 'flex', padding: 0 }">
                    <el-image :src="item.img" class="img" />
                    <div class="detail">
                        <div class="num">{{ item.num }}</div>
                        <div class="state">{{ item.state }}</div>
                    </div>
                </el-card>
            </div>
        </el-col>
        <!-- 订单趋势 -->
        <el-col :span="24" style="margin-top: 20px;">
            <el-card style="height: 400px;">
                <!--  ref="chartRef" 是获取echarts组件 DOM 对象 -->
                <div ref="chartRef" style="width: 100%; height:400px"></div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup name="Dashboard">
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { report } from '../../api'
import * as echarts from 'echarts'

const route = useRoute()

// 获取echarts组件 DOM 对象
const chartRef = ref(null)
// 实例化echarts
let myChart = null
// 订单趋势
const typeList = reactive([])

// 订单统计
const types = reactive([
    // { img: '../../../public/assets/dzf.png' },
    { img: '/dzf.png' },

    { img: '../../../public/assets/dfw.png' },
    { img: '../../../public/assets/ywc.png' },
    { img: '../../../public/assets/yqx.png' }

])
// 用户信息
const user = reactive({})

onMounted(() => {
    // 加载首页数据
    getReportData()
    initChart()
})
const getReportData = () => {
    // 获取首页报表信息
    report().then(({ data }) => {
        Object.assign(typeList, data.data.typeList)
        Object.assign(types, data.data.types)
        Object.assign(user, data.data.user)
        initChart()
    })
}

// 订单趋势echarts图表
const initChart = () => {
    if (!chartRef.value || !typeList.length) return

    // 销毁已有实例避免重复渲染
    if (myChart) {
        myChart.dispose()
    }

    // 实例化echarts
    myChart = echarts.init(chartRef.value)

    // 获取订单趋势数据
    const dates = typeList.map(item => item.date)
    const sums = typeList.map(item => item.order_sum)
    const money = typeList.map(item => item.order_money)

    // echarts图表配置
    const option = {
        // 标题
        title: {
            text: '订单趋势',
            left: 'center'
        },
        // 提示框
        tooltip: {
            trigger: 'axis'
        },
        // 图例
        legend: {
            data: ['订单数量', '订单金额'],
            top: 30
        },
        // x轴
        xAxis: {
            type: 'category',
            data: dates,
            axisLabel: {
                rotate: 45 // 防止日期文字过长
            }
        },
        // y轴
        yAxis: {
            type: 'value'
        },
        // 数据系列配置
        series: [
            {
                name: '订单数量',
                type: 'line',
                data: sums,
                smooth: true,
                itemStyle: { color: '#409EFF' }
            },
            {
                name: '订单金额',
                type: 'line',
                data: money,
                smooth: true,
                itemStyle: { color: '#F56C6C' }
            }
        ]
    }
    // 设置echarts图表配置
    myChart.setOption(option)
}

</script>

<style lang="less" scoped>
.home {
    height: 100%;

    .user-info {
        font-size: 30px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;

        .user-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-right: 20px;
        }
    }

    .login-info {
        line-height: 30px;
        font-size: 16px;
        color: #666666;
        align-items: center;
    }

    .types-box {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;

        .el-card {
            width: 45%;
            height: calc(50%);

            .img {
                padding: 15px;
                width: 100px;
                height: 100px;
            }

            .detail {
                display: flex;
                margin-left: 20px;
                flex-direction: column;
                justify-content: center;

                .num {
                    font-size: 30px;
                    color: #333333;
                }

                .state {
                    font-size: 14px;
                }
            }
        }
    }
}
</style>